<template>
  <el-card shadow="never" header="当前已用量">
		<el-progress :text-inside="true" :stroke-width="20" :color="color" :percentage="value" :format="format"/>
		<el-row :gutter="15" style="margin-top: 20px;">
			<el-col :lg="6">
				<el-card shadow="never">
					<Statistic title="文档" :value="7.41" suffix="GB" groupSeparator />
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<Statistic title="图片" :value="12.90" suffix="GB" groupSeparator />
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<Statistic title="视音频" :value="68.79" suffix="MB" groupSeparator />
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<Statistic title="其他" :value="17.58" suffix="GB" groupSeparator />
				</el-card>
			</el-col>
		</el-row>
	</el-card>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue'

const Statistic = defineAsyncComponent(() => import('@/components/Statistic'))

const value = ref(39.58)
const color = [
  { color: '#67C23A', percentage: 40 },
  { color: '#E6A23C', percentage: 60 },
  { color: '#F56C6C', percentage: 80 },
]

function format(percentage){
  return percentage + 'G'
}
</script>
